<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-17 16:06:06
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-08-28 13:56:24
-->
<template>
    <div class="screenRtTwo">
        <TitleTwo title="套餐办理价值矩阵分析"></TitleTwo>
        <div v-show="!props.isNodate" class="chartBox" ref="chartOneRef"
            :style="{ height: props.screenRtTwoHeight + 'px' }">
            <div ref="chartRef" class="chart"></div>
        </div>
        <div v-if="props.isNodate" class="chartBox" ref="chartOneRef"
            :style="{ height: props.screenRtTwoHeight + 'px' }">
            <NoDate title="暂无数据"></NoDate>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import $util from "../util/util"
import * as echarts from 'echarts';
interface PropsType {
    screenRtTwoHeight?: number
    isNodate?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    screenRtTwoHeight: 0,
    isNodate: false,
})
const colorOne = ref<any>(['#EABF3A', '#FCA12F', '#7B8DFF', '#4FD4A4', '#8ED6FA', '#476BED',])

const seriesData = ref<any>([])
const chartRef = ref<any>(null);
let myChart: any = null;
const initChart = async (data: any) => {
    // 计算数据中的最大占比值
    const maxRate = Math.max(...data.map((item: any) => parseFloat(item.rate)));
    // 根据最大占比值动态计算漏斗图的宽高和尺寸范围
    const baseWidth = maxRate > 60 ? '90%' : maxRate > 50 ? '80%' : '70%';
    const baseHeight = maxRate > 60 ? '75%' : maxRate > 50 ? '70%' : '65%';
    const maxSizeValue = maxRate > 60 ? 160 : maxRate > 50 ? 140 : 120;
    myChart = echarts.init(chartRef.value)
    const option = {
        tooltip: {
            trigger: 'item',
            showContent: true, // 是否显示提示框浮层
            backgroundColor: "#fff",
            extraCssText: "box-shadow: 0px 9px 28px 1px rgba(0,0,0,0.05);",
            formatter: function (obj: any) {
                return (
                `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总人数：</span></span>
                    <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${data[obj.dataIndex].value}</span>
                </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总金额：</span></span>
                    <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${data[obj.dataIndex].amount}元</span>
                </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">占比：</span></span>
                    <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${data[obj.dataIndex].rate}%</span>
                </span>`
                )
            },
        },
        series: [{
            name: '漏斗', //名字
            type: 'funnel', //echarts类型
            top: $util.fontSize(30),
            bottom: 0,
            left: -50, // 距左侧的距离
            width: baseWidth, // 使用动态计算的宽度
            height: baseHeight, // 使用动态计算的高度
            min: 0, //
            max: 100,
            minSize: '10%', //漏斗最小值的宽度
            maxSize: $util.fontSize(maxSizeValue), //漏斗最大值的宽度
            sort: 'descending', // 金字塔形:'ascending', 漏斗图形:'descending'
            gap: $util.fontSize(6), //图例之间的间隔
            color: [ '#7B8DFF', '#4FD4A4', '#8ED6FA', '#476BED','#FCA12F','#EABF3A',],
            // 在series配置中修改label并添加labelLine配置
            label: { //漏斗外部显示的
                show: true,
                position: 'right', //位置
                formatter: function (params: any) {
                    // 使用rich文本样式定义图标和文字
                    return [
                        '{text|' + params.data.name + ' ' +params.data.rate + '%}',
                        '{icon|}'
                    ].join('');
                },
                color: '#fff', // 文字颜色
                fontSize: $util.fontSize(14),
                overflow: 'break',
                align: 'left',
                // 定义rich文本样式
                rich: {
                    text: {
                        align: 'left',
                        padding: [0, 10, 0, 0] // 文字与图标之间的间距
                    },
                    icon: {
                        color: (params: any) => params.data.color, // 使用与图形相同的颜色
                        width: $util.fontSize(12),
                        height: $util.fontSize(12),
                        borderRadius: 0, // 矩形图标
                        align: 'left',
                        verticalAlign: 'middle'
                    }
                }
            },
            // 取消连接线
            labelLine: {
                show: true,
                length: 40, // 线条长度
            },
            itemStyle: {
                opacity: 1, //图形透明度
                borderColor: '#fff', //图形边框颜色
                borderWidth: 0 //图形边框宽度
            },
            data: data,
            // z: 100,
        },
        ]
    }
    myChart.setOption(option)
}
//重新加载图表
const reloadChart = () => {
    disposeChart()
    initChart(seriesData.value)
}
const disposeChart = () => {
    if (myChart) {
        myChart.dispose();
    }
}
onMounted(async () => {
    window.addEventListener("resize", () => {
        setTimeout(() => {
            reloadChart()
        }, 500)
    });
})
defineExpose({ initChart })
</script>
<style lang="scss" scoped>
.chartBox {
    width: 100%;
    position: relative;

    .chart {
        width: 100%;
        height: 100%;
        max-height: 210px;
    }
}
</style>